<template>
  <div class="tenant-agent-applications">
    <!-- 背景装饰元素 -->
    <BackgroundDecoration />

    <div class="tenant-wrapper">
      <!-- 顶部导航栏 -->
      <UserTopNavbar :active-index="'4'" />

      <div class="main-content">
        <!-- 侧边栏 -->
        <UserSidebar :active-menu="'tenant'" />

        <!-- 主内容区域 -->
        <div class="content-area">
          <div class="applications-header">
            <h1 class="page-title">房源申请记录</h1>
            <div class="header-actions">
              <el-input
                v-model="searchKeyword"
                placeholder="搜索申请记录..."
                clearable
                style="width: 300px"
                @keyup.enter="searchApplications"
              >
                <template #append>
                  <el-button icon="Search" @click="searchApplications" />
                </template>
              </el-input>
            </div>
          </div>

          <div class="applications-content">
            <!-- 筛选面板 -->
            <div class="filter-panel">
              <div class="filter-section">
                <h3>申请状态</h3>
                <el-checkbox-group v-model="selectedStatuses">
                  <el-checkbox v-for="status in statuses" :key="status.value" :label="status.value">
                    {{ status.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>

              <div class="filter-section">
                <h3>申请时间</h3>
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD"
                  style="width: 100%"
                />
              </div>

              <div class="filter-actions">
                <el-button type="primary" @click="applyFilters">应用筛选</el-button>
                <el-button @click="resetFilters">重置筛选</el-button>
              </div>
            </div>

            <!-- 申请记录列表 -->
            <div class="applications-main">
              <div class="applications-list">
                <div
                  class="application-item"
                  v-for="application in displayedApplications"
                  :key="application.id"
                >
                  <div class="application-header">
                    <div class="house-info">
                      <h3 class="house-title">{{ application.house.title }}</h3>
                      <p class="house-location">
                        <el-icon><Location /></el-icon>
                        {{ application.house.location }}
                      </p>
                    </div>
                    <el-tag :type="getApplicationStatusType(application.status)">
                      {{ getApplicationStatusText(application.status) }}
                    </el-tag>
                  </div>

                  <div class="application-content">
                    <div class="house-image">
                      <img :src="application.house.image" :alt="application.house.title">
                    </div>

                    <div class="application-details">
                      <div class="detail-row">
                        <span class="label">申请编号:</span>
                        <span class="value">{{ application.id }}</span>
                      </div>
                      <div class="detail-row">
                        <span class="label">申请时间:</span>
                        <span class="value">{{ application.applyTime }}</span>
                      </div>
                      <div class="detail-row">
                        <span class="label">房源价格:</span>
                        <span class="value">¥{{ application.house.price }}/月</span>
                      </div>
                      <div class="detail-row">
                        <span class="label">房型面积:</span>
                        <span class="value">{{ application.house.layout }} | {{ application.house.area }}㎡</span>
                      </div>
                      <div class="detail-row">
                        <span class="label">房东:</span>
                        <span class="value">{{ application.landlord.name }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="application-footer">
                    <div class="application-actions">
                      <el-button
                        size="small"
                        @click="viewApplicationDetail(application.id)"
                      >
                        查看详情
                      </el-button>
                      <el-button
                        v-if="application.status === 'pending'"
                        size="small"
                        type="danger"
                        @click="cancelApplication(application.id)"
                      >
                        取消申请
                      </el-button>
                      <el-button
                        v-if="application.status === 'approved'"
                        size="small"
                        type="success"
                        @click="signContract(application.id)"
                      >
                        签订合同
                      </el-button>
                      <el-button
                        v-if="application.status === 'rejected'"
                        size="small"
                        type="primary"
                        @click="reapply(application.id)"
                      >
                        重新申请
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="pagination">
                <el-pagination
                  v-model:current-page="currentPage"
                  v-model:page-size="pageSize"
                  :page-sizes="[5, 10, 20, 50]"
                  :total="filteredApplications.length"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import BackgroundDecoration from '@/components/user/BackgroundDecoration.vue'
import UserTopNavbar from '@/components/user/UserTopNavbar.vue'
import UserSidebar from '@/components/user/UserSidebar.vue'
import { Location } from '@element-plus/icons-vue'

const searchKeyword = ref('')
const selectedStatuses = ref(['pending', 'approved', 'rejected'])
const dateRange = ref('')
const currentPage = ref(1)
const pageSize = ref(5)

// 筛选选项
const statuses = [
  { value: 'pending', label: '待处理' },
  { value: 'approved', label: '已通过' },
  { value: 'rejected', label: '已拒绝' },
  { value: 'cancelled', label: '已取消' }
]

// 申请记录数据
const applications = ref([
  {
    id: 'APP202508001',
    status: 'pending',
    applyTime: '2025-08-01 14:30:22',
    house: {
      id: 1,
      title: '精致一居室公寓',
      location: '北京市朝阳区CBD建国路88号',
      price: 4500,
      layout: '一居室',
      area: 60,
      image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1769&q=80'
    },
    landlord: {
      name: '李房东',
      phone: '138****8888'
    }
  },
  {
    id: 'APP20250728002',
    status: 'approved',
    applyTime: '2025-07-28 09:15:30',
    house: {
      id: 2,
      title: '豪华两居室',
      location: '上海市浦东新区陆家嘴金融中心',
      price: 8500,
      layout: '两居室',
      area: 90,
      image: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'
    },
    landlord: {
      name: '王房东',
      phone: '139****9999'
    }
  },
  {
    id: 'APP20250725003',
    status: 'rejected',
    applyTime: '2025-07-25 16:45:12',
    house: {
      id: 3,
      title: '舒适三居室',
      location: '广州市天河区珠江新城',
      price: 12000,
      layout: '三居室',
      area: 120,
      image: 'https://images.unsplash.com/photo-1575517114892-6a0eb8c4fd5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'
    },
    landlord: {
      name: '张房东',
      phone: '137****7777'
    }
  },
  {
    id: 'APP20250720004',
    status: 'cancelled',
    applyTime: '2025-07-20 11:20:05',
    house: {
      id: 4,
      title: '现代化loft公寓',
      location: '深圳市南山区科技园',
      price: 6500,
      layout: '一居室',
      area: 75,
      image: 'https://images.unsplash.com/photo-1591204895332-3a5e1d3e2ddd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'
    },
    landlord: {
      name: '赵房东',
      phone: '136****6666'
    }
  }
])

// 计算属性
const filteredApplications = computed(() => {
  let result = [...applications.value]

  // 根据搜索关键词筛选
  if (searchKeyword.value) {
    result = result.filter(app =>
      app.id.includes(searchKeyword.value) ||
      app.house.title.includes(searchKeyword.value) ||
      app.house.location.includes(searchKeyword.value)
    )
  }

  // 根据状态筛选
  if (selectedStatuses.value.length > 0) {
    result = result.filter(app => selectedStatuses.value.includes(app.status))
  }

  // 根据日期范围筛选
  if (dateRange.value && dateRange.value.length === 2) {
    const [startDate, endDate] = dateRange.value
    result = result.filter(app => {
      const appDate = new Date(app.applyTime)
      return appDate >= new Date(startDate) && appDate <= new Date(endDate)
    })
  }

  return result
})

const displayedApplications = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredApplications.value.slice(start, end)
})

// 方法
const searchApplications = () => {
  currentPage.value = 1
  ElMessage.info(`搜索关键词: ${searchKeyword.value}`)
}

const applyFilters = () => {
  currentPage.value = 1
  ElMessage.success('筛选已应用')
}

const resetFilters = () => {
  searchKeyword.value = ''
  selectedStatuses.value = ['pending', 'approved', 'rejected']
  dateRange.value = ''
  ElMessage.success('筛选条件已重置')
}

const getApplicationStatusText = (status) => {
  const statusTexts = {
    'pending': '待处理',
    'approved': '已通过',
    'rejected': '已拒绝',
    'cancelled': '已取消'
  }
  return statusTexts[status] || '未知状态'
}

const getApplicationStatusType = (status) => {
  const statusTypes = {
    'pending': 'warning',
    'approved': 'success',
    'rejected': 'danger',
    'cancelled': 'info'
  }
  return statusTypes[status] || 'info'
}

const viewApplicationDetail = (id) => {
  ElMessage.info(`查看申请详情: ${id}`)
  // 实际项目中应跳转到申请详情页面
}

const cancelApplication = (id) => {
  ElMessageBox.confirm(
    '确定要取消该房源申请吗？',
    '取消申请',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('申请已取消')
    // 实际项目中应发送取消申请请求
  })
}

const signContract = (id) => {
  ElMessage.info('跳转到合同签订页面')
  // 实际项目中应跳转到合同签订页面
}

const reapply = (id) => {
  ElMessage.info('重新申请该房源')
  // 实际项目中应重新提交申请
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped>
.tenant-agent-applications {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

.tenant-wrapper {
  width: 100%;
  height: 100vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  padding: 20px;
}

.applications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 15px;
}

.page-title {
  color: #2c3e50;
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

.applications-content {
  display: flex;
  flex: 1;
  gap: 20px;
  overflow: hidden;
}

.filter-panel {
  width: 280px;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  height: fit-content;
  max-height: calc(100vh - 250px);
}

.filter-section {
  margin-bottom: 25px;
}

.filter-section h3 {
  margin: 0 0 15px;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}

.filter-actions {
  display: flex;
  gap: 10px;
}

.applications-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.applications-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 transparent;
}

.applications-list::-webkit-scrollbar {
  width: 6px;
}

.applications-list::-webkit-scrollbar-track {
  background: transparent;
}

.applications-list::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

.application-item {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.application-item:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.application-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.house-info {
  flex: 1;
}

.house-title {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
}

.house-location {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 14px;
  color: #7f8c8d;
}

.application-content {
  display: flex;
  padding: 20px;
  gap: 20px;
}

.house-image {
  width: 200px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.house-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.application-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-row {
  display: flex;
}

.label {
  width: 100px;
  color: #7f8c8d;
  font-size: 14px;
}

.value {
  flex: 1;
  color: #2c3e50;
  font-size: 14px;
}

.application-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  background: #fafafa;
}

.application-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

@media (max-width: 1200px) {
  .applications-content {
    flex-direction: column;
  }

  .filter-panel {
    width: 100%;
    height: 300px;
  }

  .applications-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}

@media (max-width: 992px) {
  .application-content {
    flex-direction: column;
  }

  .house-image {
    width: 100%;
    height: 200px;
  }
}

@media (max-width: 768px) {
  .tenant-wrapper {
    margin: 10px;
    padding: 10px;
  }

  .applications-content {
    padding: 15px;
  }

  .application-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .application-actions {
    flex-direction: column;
  }
}
</style>
